<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<script type="text/javascript" src="prototype.js" ></script>
<script type="text/javascript">

var targetName = "ajay";
var targetUser = "ajay@localhost";

function populateForm(){
	   new Ajax.PeriodicalUpdater('currentChat', '/chat/ChatRoom',
	     {
	       method: 'get',
	       insertion: Insertion.Bottom,
	       frequency: 3,
	       parameters: {getMessages: targetUser},
	     });
	   $('nameTag').innerHTML = targetName;
	};

function sendMessage(){
	new Ajax.Request('/chat/ChatRoom',{
			method: 'get',
			parameters:
			{target: targetUser, 
			message: $('newChatText').getValue()}
		});
	   		$('newChatText').value = "";
	};

function populateForm(){
	   new Ajax.Updater('roster', '/chat/ChatRoom', {
	     method: 'get',
	     parameters: {getRoster: 'yes'}
	   });


</script>
</head>
<body onload="populateForm()">

<h1>Chat Page</h1>

<table>
<tr>
   <td colspan="2">
     <div id="nameTag">NameTag</div>
   </td>
</tr>
<tr>
   <td style="width: 75%">
        <div style="border: 1px solid black; width: 100%; height: 500px;"
		 id="currentChat"></div>
   </td>
   <td>
     <div style="border: 1px solid black; width: 200px; height: 500px;" 
	 id="roster"></div>
   </td>
</tr>
<tr>
   <td colspan="2">
     <form id="chatForm" style="clear: left;" onsubmit="sendMessage()">
        <input type="text" id="newChatText" style="width: 80%;" />
        <input type="button" id="newChatButton" value="Send" onclick="sendMessage()" />
     </form>
   </td>
</tr>
</table>
</body>
</html>
